<template>
    <ImgInfoCard :img="card.img" :title="'基本信息'" @onMore="goDetail(props.permi)" :list="card.infoList"></ImgInfoCard>
</template>

<script setup>
import ImgInfoCard from '@/DbComponents/imgInfoCard'
import { reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'
import dashBoardApi from '@/api/Property/dashBoard'
// import { toThousands } from '@/utils/number-util'

const props = defineProps({
    projectCode: {
        type: String,
        required: false,
        default: ''
    }
})

const card = reactive(
    {
        img: '',
        infoList: [],
        // infoList: [{ label: '建筑面积', value: '', color: '' }],
    }
)

const getInfo = () => {
    dashBoardApi.propertyProjectInfoApi({ projectCode: props.projectCode }).then((res) => {
        if (res.data.code == 200) {
            card.img = !res.data.data.pictureUrl || res.data.data.pictureUrl == '-' ? '' : res.data.data.pictureUrl
            card.infoList = [
                {
                    label: '建筑面积',
                    value: res.data.data.area,
                },
                {
                    label: '车位总数',
                    value: res.data.data.parkTotal,
                },
                {
                    label: '管理费单价',
                    value: res.data.data.price,
                },
                {
                    label: '产品标准',
                    value: res.data.data.standard,
                },
            ]
        }
    }).catch(err => {
        console.log(err)
    });
}

const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
}
getInfo()

const projectCode = computed(() => {
    return props.projectCode
});
watch(projectCode, () => {
    getInfo()
}, { deep: true });
</script>

<style scoped lang="scss"></style>
